<script setup lang="ts">
import router from '@/router';
import type { HomeCateItem } from '@/types/Home'
import { useRoute } from 'vue-router';

const route = useRoute()

defineProps<{
    list: HomeCateItem[]
}>()
</script>

<template>
    <div id="cate">
        <div v-for="item in list" :key="item._id" class="cate-box">
            <div class="icon-box" @click="router.push('/type')">
                <!-- item.img -->
                <img :src="item.img" alt="" class="icon">
            </div>
            <div>{{ item.title }}</div>
        </div>
    </div>
</template>

<style scoped lang="less">
#cate {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1.1337rem;
    justify-content: space-between;

    .cate-box {
        // background-color: aqua;
        margin: 0 10px;
        box-sizing: border-box;
    }

    .icon-box {
        width: 2.8343rem;
        height: 2.8343rem;
        border-radius: 5px;
        margin: 10px;
        background: linear-gradient(to right top, #29d8ff, #00cafd);
        display: flex;
        justify-content: center;
        align-items: center;

        .icon {
            width: 1.7006rem;
        }
    }
}
</style>